<template>
    <basic-container>
        <div class="tagManage">
            <div class="tagManage_l">
                <div class="tagManage_l_header">
                    <el-button size="small" type="primary" @click="open('group')">创建分组</el-button>
                    <el-button size="small" :disabled="checkedGroup.length===0" @click="delGroup">删除分组</el-button>
                </div>
                <div class="tagManage_l_con">
                    <el-checkbox-group v-model="checkedGroup" @change="getList">
                        <template v-for="item in groupList">
                            <p>
                                <el-checkbox :value="item.oid" :label="item.oid">{{ item.name }}</el-checkbox>
                            </p>
                        </template>
                    </el-checkbox-group>
                </div>
            </div>
            <div class="tagManage_r">
                <avue-crud :option="option"
                           :table-loading="loading"
                           :data="tableData"
                           @selection-change="v=>selection=v"
                           @current-change="currentChange"
                           @size-change="sizeChange"
                           ref="crud"
                           :page.sync="page">
                    <template slot="menuLeft" slot-scope="{size}">
                        <el-button :size="size"
                                   type="primary"
                                   :disabled="checkedGroup.length!==1"
                                   @click="open('tag')">
                            创建标签
                        </el-button>
                    </template>

                    <template slot="menu" slot-scope="{row}">
                        <el-button type="text" size="small" @click="delTag(row)">删除</el-button>
                    </template>
                </avue-crud>
            </div>
        </div>

        <el-dialog :visible.sync="visible"
                   title="创建分组"
                   width="400px"
                   :modal-append-to-body="true"
                   :append-to-body="true">
            <el-form ref="form" size="small" :model="form" :rules="rules" label-width="100px">
                <el-form-item :label="this.dialogType==='group'?'分组名称':'标签名称'" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer">
                <el-button size="small" type="primary" @click="saveGroup">保存</el-button>
                <el-button size="small" @click="visible=false">取消</el-button>
            </div>
        </el-dialog>
    </basic-container>
</template>

<script>
import * as api from "@/api/tagManage/tagManage";

export default {
    name: "tagManage",
    data() {
        return {
            loading: false,
            selection: [],
            tableData: [],
            page: {
                pageSize: 20,
                currentPage: 1,
                total: 1
            },
            option: {
                height: 'auto',
                calcHeight: 30,
                dialogWidth: 900,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                selection: true,
                viewBtn: false,
                dialogClickModal: false,
                tabs: true,
                delBtn: false,
                addBtn: false,
                editBtn: false,
                refreshBtn: false,
                columnBtn: false,
                align: "center",
                column: [
                    {
                        label: "标签名称",
                        prop: "name",
                    },
                    {
                        label: '分组名称',
                        prop: 'groupName',
                    }
                ]
            },

            visible: false,
            form: {name: ""},
            rules: {
                name: [{required: true, trigger: 'blur', message: "请输入名称"}],
            },

            checkedGroup: [],
            groupList: [],

            dialogType: "group",
        }
    },
    methods: {
        open(val) {
            this.dialogType = val;
            this.visible = true;
            this.form = {name: ""}
        },

        saveGroup() {
            this.$refs.form.validate(v => {
                if (v) {
                    let method = this.dialogType === "group" ? 'addGroup' : 'addTag'
                    let method_ = this.dialogType === "group" ? 'getGroup' : 'getList'
                    let obj = {};
                    if (this.dialogType !== "group") {
                        obj["groupId"] = this.checkedGroup[0];
                    }
                    api[method]({...this.form, ...obj}).then(() => {
                        this.$message.success("保存成功");
                        this.visible = false;
                        this[method_]();
                        this.checkedGroup = [];
                    })
                }
            })
        },
        delGroup() {
            this.$confirm("是否删除").then(() => {
                api.deleteGroup({ids: this.checkedGroup.join(",")}).then(() => {
                    this.$message.success("删除成功");
                    this.getGroup();
                })
            })
        },
        delTag(row) {
            this.$confirm("是否删除").then(() => {
                api.deleteTag({ids: row.oid}).then(() => {
                    this.$message.success("删除成功");
                    this.getList();
                })
            })
        },
        getList() {
            this.loading = true;
            api.listTag({
                current: this.page.currentPage,
                size: this.page.pageSize,
                groupIds: this.checkedGroup.join(",")
            }).then(res => {
                let d = res.data.data;
                this.page.total = d.totalRows;
                this.tableData = d.list;
                this.loading = false;
            })
        },
        getGroup() {
            api.listGroup().then(res => {
                this.groupList = res.data.data;
            })
        },

        currentChange(currentPage) {
            this.page.currentPage = currentPage;
            this.getList();

        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
            this.getList();
        },
    },
    mounted() {
        this.getList();
        this.getGroup();
    }
}
</script>

<style scoped lang="scss">
.tagManage {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;

  .tagManage_l {
    width: 300px;

    .tagManage_l_header {
      width: 100%;
      height: 40px;
    }

    .tagManage_l_con {
      height: calc(100% - 40px - 5px);
      margin-top: 5px;
      border: 1px solid #EBEEF5;
      box-sizing: border-box;
      padding: 10px 0;

      p {
        padding: 5px 10px;
      }
    }
  }

  .tagManage_r {
    width: calc(100% - 300px - 20px);
  }
}
</style>
